<template>
  <div class="left-container">
    <h3>Left 组件 --- {{count}}</h3>
    <hr>
    <button @click="count++">+1</button>
    <button @click="count--">-1</button>

    <!-- 使用 v-bind 将字符串改成数值-->

  </div>
</template>

<script>
export default {
  name:'MyLeft',
  data(){
    return{
      count: 0,
    }
  },
  // 当组件第一次被创建的时候,既会执行 created 生命周期,也会执行 activated 生命周期
  // 但是,当组件被激活的时候,只会触发 activated 生命周期,不再触发 created 生命周期。因为组件没有被重新创建
  created() {
    console.log('Left 组件被创建了!')
  },
  destroyed() {
    console.log('Left 组件被销毁了!')
  },
  activated() {
    console.log('组件被激活了,activated')
  },
  deactivated() {
    console.log('组件被缓存了，deactivated')
  },
}
</script>

<!--scoped 给组件(HTML)的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性-->
<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
// 想在 Left 组件去控制 Count 中的 h4 元素
// 当使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,需要用到 /deep/
/deep/ h4{
  color: chartreuse;
}
</style>
